<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户列表</title>
</head>

<body>


  <script>

    window.onload = function () {

      request('/users').then(data => {
        document.write(createUserTable(data))
      })


    }


    function createUserTable(data) {
      return data.map(item => (
        `<li>
          <span>${item.name}</span>
          <span>${item.age}</span>
        </li>`
      )).join('')
    }

    function request(url, method = 'get', headers = {}, data = {}) {
      let options = {
        method,
        headers: {
          'content-type': 'application/json',
          ...headers
        },
        body: method != 'get' ? JSON.stringify(data) : null
      };
      return fetch(url, options).then(res => res.json())
    }
  </script>


</body>

</html>